<template>
<div class="bottom">
  <div class="block">

    <el-carousel  indicator-position="none" arrow="never" :autoplay="false" height="100px" ref="cardShow" >
      <el-carousel-item style="display: flex;justify-content: space-between;" v-for="(item,index) in newArr" :key="index">
        <div v-if="isShow"  @click="imageClick('left')"
          style="position: absolute;left: 5px;top: 10px; z-index: 999; width: 20px;height: 80px;background-color: #E6EDF8;
          line-height: 80px;text-align: center;">
             <img style="height: 20px;" src="../../assets/Vector 1108.png" />
        </div>
              <div style=" width: 175px;height:100px ; margin-top: 20px; text-align: center;" v-for="(it,i) in item" :key="i">
                 <div>{{ it.a }}</div>
                 <div>{{ it.b }}</div>
                 <div>{{ it.c }}</div>
              </div>
        <div  @click="imageClick('right',index)"
          style="position: absolute; z-index: 999; right: 5px;top: 10px; width: 20px;height: 80px;background-color: #E6EDF8;
          line-height: 80px;text-align: center;">
            <img style="height: 20px;" src="../../assets/Vector 1108.png" />
        </div>
      </el-carousel-item>
    </el-carousel>
    
  </div>
</div>
</template>

<script>
  export default {
    data() {
      return {
        aaa:[
       {
            a:'资生学术权威0',
            b:'57分',
            c:'75分'
          },
          {
            a:'资生学术权威0',
            b:'57分',
            c:'75分'
          },
          
          {
            a:'资生学术权威1',
            b:'57分',
            c:'75分'
          },
          {
            a:'资生学术权威2',
            b:'57分',
            c:'75分'
          },
          {
            a:'资生学术权威3',
            b:'57分',
            c:'75分'
          },
          {
            a:'资生学术权威4',
            b:'57分',
            c:'75分'
          },
          {
            a:'资生学术权威5',
            b:'57分',
            c:'75分'
          },
          {
            a:'资生学术权威6',
            b:'57分',
            c:'75分'
          },
          {
            a:'资生学术权威0',
            b:'57分',
            c:'75分'
          },
          {
            a:'资生学术权威0',
            b:'57分',
            c:'75分'
          },
          {
            a:'资生学术权威0',
            b:'57分',
            c:'75分'
          },
          {
            a:'资生学术权威0',
            b:'57分',
            c:'75分'
          },{
            a:'资生学术权威0',
            b:'57分',
            c:'75分'
          },{
            a:'资生学术权威0',
            b:'57分',
            c:'75分'
          },
        ],
        isShow:false,
        newArr:[]
      };
    },
    created () {
      let num=4
       let arr=[]
        for (let i = 0; i < this.aaa.length; i+=num) {
          arr.push(this.aaa.slice(i,i+num))
        }
        this.newArr=arr
    },
    methods: {
      imageClick(val,index){
        index==this.newArr.length-1?this.isShow=false:this.isShow=true;
        if (val == 'right') {
      //点击右按钮切换至下一页走马灯
        this.$refs.cardShow.next()
      }else {
      //点击左按钮切换至上一页走马灯
        this.$refs.cardShow.prev()
      }
      }
    }
  
  };
</script>
<style>
.bottom{
  width: 700px;
  height: 100px;
  background-color: aquamarine;
  border-radius: 5px;
}
.block{
  padding:  0 10px 0 10px  ;
  position: relative;
}

</style>